<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // 简易案例
    // 需求 描述一只猫的名称，颜色，种族,叫声，技能

    // 面向过程: 就是分析出解决问题所需要的步骤，然后用变量,函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。

    /* var name = "Tom";
    var color = "black";
    var species = "猫";
    function call() {
        console.log("喵喵");
    }
    function skill() {
        console.log("捉老鼠");
    }
    function say() {
        console.log(name, color);
    } */

    // 面向对象: 思想上提升 , 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)  

    // =>  (字面量对象) 最简单的面向对象   => 把面向过程的变量和函数 放到对象中=> 属性和方法
    // 优点: 代码结构简单,易于理解
    // 缺点: 无法实现代码的复用(没创建一个 全部写一遍) , 内存占用比较高(在对象中相同的属性和方法重复声明)

    /* var Tom = {
        name: "Tom",
        color: "black",
        species: "猫",
        call: function () {
            console.log("喵喵");
        },
        skill() {
            console.log("捉老鼠");
        },
        say() {
            console.log(this.name, this.color);
        }
    } */
    // Tom.say();


    /* var Kitty = {
        name: "Kitty",
        color: "pink",
        species: "猫",
        call: function () {
            console.log("喵喵");
        },
        skill() {
            console.log("捉老鼠");
        },
        say() {
            console.log(this.name, this.color);
        }
    } */

    // 工厂模式
    // 优点:  可以根据传入的参数 快速生成对应的对象
    // 缺点:
    // a. 通过函数创建对象 和 函数本身 没有关联 (相对于构造函数)
    // b. 公有的属性和方法 重复声明,栈内存

    function cat(name, color) {
        var obj = {
            name: name,
            color: color,
            species: "猫",
            call: function () {
                console.log("喵喵");
            },
            skill() {
                console.log("捉老鼠");
            },
            say() {
                console.log(this.name, this.color);
            }
        }
        return obj;
    }

    var Tom = cat("Tom", "black");
    console.log(Tom, Tom instanceof cat, Tom instanceof Object);

    var Kitty = cat("Kitty", "pink");
    console.log(Kitty, Kitty instanceof cat);


    var arr = new Array(1, 2, 3, 4);
    console.log(arr instanceof Array);

    var p = new Promise(() => { });
    console.log(p instanceof Promise);


    // =>  如何解决?  面向对象的封装
</script>

</html>